<template>
	<view>
		<view class="u-border-bottom tab_top">
			<u-tabs-swiper ref="uTabs" :list="list" activeColor="#0c838b" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<view class="u-padding-20" style="color:#ff5500;font-size: 24rpx;">
					<u-icon class="va_m u-margin-right-20" size="35" color="#ff5500" name="volume-up-fill"></u-icon>
					<text class="va_m">最新有{{userHouse.length}}条数据等待处理，请去后台及时处理</text>
				</view>
				<view class="u-padding-20 house_list" style="background-color: #fff;" v-for="(item,index) in userHouse" :key="index">
					<view class="house_title">
						<text class="dis_inl_blo circle"></text>房号：{{item.house}}
					</view>
					<view>
						提交人：{{item.userInfo.u_name}} {{item.userInfo.u_tel}}
					</view>
					<view>
						身份：{{item.type_value}}
					</view>
					<view>
						提交时间：{{item.time}}
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="u-padding-20" style="color:#ff5500;font-size: 24rpx;">
					<u-icon class="va_m u-margin-right-20" size="35" color="#ff5500" name="volume-up-fill"></u-icon>
					<text class="va_m">最新有{{userCar.length}}条数据等待处理，请去后台及时处理</text>
				</view>
				<view class="u-padding-20 house_list u-rela" style="background-color: #fff;" v-for="(item,index) in userCar" :key="index">
					<view class="house_title">
						<text class="dis_inl_blo circle"></text>车牌号：{{item.number}}
					</view>
					<view>
						提交人：{{item.name}} {{item.tel}}
					</view>
					<view>
						车辆：{{item.type_value}} {{item.brand}}
					</view>
					<view>
						车位：{{item.park_value}}
					</view>
					<view>
						提交时间：{{item.time}}
					</view>
					<image style="bottom:20rpx;right:30rpx" class="u-abso" mode="aspectFill" :src="item.image"></image>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="u-padding-20" style="color:#ff5500;font-size: 24rpx;">
					<u-icon class="va_m u-margin-right-20" size="35" color="#ff5500" name="volume-up-fill"></u-icon>
					<text class="va_m">最新有{{userFamily.length}}条数据等待处理，请去后台及时处理</text>
				</view>
				<view class="u-padding-20 house_list u-rela" style="background-color: #fff;" v-for="(item,index) in userFamily" :key="index">
					<view class="house_title">
						<text class="dis_inl_blo circle"></text>邀请信息：{{item.name1}}  {{item.tel1}}
					</view>
					<view>
						提交人：{{item.name}} {{item.tel}}
					</view>
					<view>
						邀请人身份：{{item.type}}
					</view>
					<view>
						提交时间：{{item.time}}
					</view>
					<!-- <image style="bottom:20rpx;right:30rpx" class="u-abso" mode="aspectFill" :src="item.image"></image> -->
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		getUserCar,
		getUserHouse
	} from "@/service/indexService.js";
	export default {
		data() {
			return {
				list: [{
					name: '房屋信息'
				}, {
					name: '车辆信息'
				}, {
					name: '家庭成员信息'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				userHouse:[],
				userCar:[],
				userFamily:[
					{
						id:1,
						name:'木某某',
						tel:'13333333333',
						name1:'小木',
						tel1:'13333333333',
						time:'2022-7-29',
						type:'租客'
					},
					{
						id:2,
						name:'木某某',
						tel:'13333333333',
						name1:'小木',
						tel1:'13333333333',
						time:'2022-7-29',
						type:'租客'
					}
				]
			};
		},
		onLoad() {
			getUserCar().then(this.getUserCar);
			getUserHouse().then(this.getUserHouse);
		},
		methods: {
			getUserCar:function(e){
				if(e.code==200){
					this.userCar=e.result
				}
			},
			getUserHouse:function(e){
				if(e.code==200){
					this.userHouse=e.result
				}
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				
			}
		}
	};
</script>
<style lang="scss">
	page{
		background-color: #F3f5f7;
	}
	.tab_top{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		background-color: #fff;
		z-index: 999;
	}
	swiper{
		margin-top:80rpx;
		width:100%;
		// overflow-y: scroll;
		height:1500rpx !important;
	}
	swiper-item{
		overflow-y: scroll;
	}
	.house_list{
		margin-bottom:20rpx;
	}
	.house_list view{
		height:50rpx;
		color:#666;
		font-size: 28rpx;
		line-height: 50rpx;
	}
	.house_list .house_title{
		height:70rpx;
		font-size: 32rpx;
		padding:10rpx 0;
		color:#333;
		border-bottom:1rpx solid #ddd;
	}
	.circle{
		width:15rpx;
		height:15rpx;
		margin-right:20rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #0c838b;
	}
	.house_list image{
		width:150rpx;
		height:150rpx;
	}
</style>